import React from 'react'
import { NavLink } from 'react-router-dom'
import { getLinks } from '../../api/link'

import './sidebar.scss'

interface Props {
  toggle: Function
  popup: boolean
}

const Sidebar = (props: Props) => {
  const toogle = () => {
    props.toggle()
  }

  const linkRender = (links: Array<any>) => {
    if (!links) return null
    return links.map(({ icon, title, path }) => {
      return (
        <NavLink key={path} className="link" activeClassName="active" to={path}>
          <i className={`iconfont ${icon}`}></i>{' '}
          <span className="text"> {title}</span>
        </NavLink>
      )
    })
  }

  return (
    <>
      <div
        onClick={toogle}
        className={`main-overlay ${props.popup ? 'active' : ''}`}
      ></div>

      <div
        onClick={toogle}
        className={`side-menu ${props.popup ? 'popup' : ''}`}
      >
        <img
          width="100%"
          height="150"
          className="sidebar-image"
          src="https://cdn.jsdelivr.net/gh/Redloney/CDN@1.2/static/gif/street.gif"
        />
        <div className="logo">
          <a href="#" className="avatar">
            <img src="http://q1.qlogo.cn/g?b=qq&nk=67591850&s=100&t=" />
          </a>
          <div className="info">
            <a href="" className="link">
              Redloney
            </a>
            <p className="motoo">欲戴王冠,必承其重</p>
          </div>
        </div>
        <nav>
          <ul className="vertical-menu">
            <li className="menu-link">{linkRender(getLinks())}</li>
          </ul>
        </nav>
      </div>
    </>
  )
}

export default Sidebar
